<template>
  <div class="container">
    <list>
      <page-refresh v-on:refresh="onXRefresh" v-on:pullingDown="onPullingDown" :refreshing="refreshing"
                    :indicatorScale="indicatorScale"></page-refresh>
      <cell>
        <div class="header-wrapper">
          <div class="header">
            <div class="user-avatar-wrapper" @click="avatarClick">
              <image :src="userAvatar || defaultAvatarUrl" class="user-avatar"></image>
            </div>
            <div class="user-detail" v-if="loginStatus">
              <div class="user-detail-row" @click="userLevelClick">
                <text class="user-nick">{{userNickname}}</text>
                <text v-if="iosShow" :class="['user-level', 'icon', 'user-level-' + userLevel]">{{userLevelTitle}}</text>
                <text v-if="agentList.length > 0 && iosShow" :class="['user-agent-label', 'icon']" @click="navigatorCellClicked('my-agent.js', true)">&#xe68a;代理</text>
              </div>
              <div class="user-detail-row" v-if="iosShow">
                <text class="user-invitation-code">邀请码:{{userInvitationCode}}</text>
                <text class="copy-invitation-btn activeable" @click="copyInvitationCode">复制</text>
              </div>
            </div>
            <div class="header-login-panel" v-if="!loginStatus">
              <text class="header-login-btn" @click="loginBtnClick">现在登录</text>
            </div>
            <div class="header-right">
              <text class="header-right-icon icon activeable" @click="goToSettings">&#xe65c;</text>
            </div>
          </div>
          <div class="upgrade" @click="userLevelClick" v-if="loginStatus && iosShow">
            <div v-if="nextUserLevel === 'PLUS'">
              <text :class="['upgrade-level', 'icon', 'upgrade-level-' + nextUserLevel]">&#xe65f; {{nextUserLevelTitle}}</text>
              <text :class="['upgrade-info', 'icon', 'upgrade-info-' + nextUserLevel]">升级6大特权 &#xe601;</text>
            </div>
            <div v-if="nextUserLevel === 'CARRIER' || nextUserLevel === 'CHIEF'">
              <text :class="['upgrade-level', 'icon', 'upgrade-level-' + nextUserLevel]" >&#xe8a6; {{nextUserLevelTitle}}</text>
              <text :class="['upgrade-info', 'icon', 'upgrade-info-' + nextUserLevel]"  >升级8大特权 &#xe601;</text>
            </div>
          </div>
        </div>
      </cell>
      <cell v-if="!iosShow">
        <div class="panel">
          <div class="grid-list">
            <div class="grid-cell" @click="navigatorCellClicked('commission-order-list.js', true)">
              <text class="grid-cell-icon text-info icon">&#xe792;</text>
              <text class="grid-title">订单明细</text>
            </div>
            <div class="grid-cell" @click="navigatorCellClicked('flash-sale-order-list.js',true)">
              <text class="grid-cell-icon icon text-primary">&#xe675;</text>
              <text class="grid-title">我的免单</text>
            </div>
            <div class="grid-cell" @click="navigatorCellClicked('my-item-selection-list.js', true)">
              <text class="grid-cell-icon text-primary icon">&#xe86f;</text>
              <text class="grid-title">我的选品库</text>
            </div>
            <div class="grid-cell" @click="navigatorCellClicked('footmark.js?type=HISTORY', true)">
              <text class="grid-cell-icon icon text-success">&#xe87e;</text>
              <text class="grid-title">我的足迹</text>
            </div>
          </div>
          <div class="grid-list">
            <div class="grid-cell" @click="navigatorCellClicked('footmark.js?type=FAVOR', true)">
              <text class="grid-cell-icon icon text-warning">&#xe64c;</text>
              <text class="grid-title">我的收藏</text>
            </div>
            <div class="grid-cell" @click="navigatorCellClicked('customer-service.js', true)">
              <text class="grid-cell-icon icon text-warning">&#xe637;</text>
              <text class="grid-title">联系客服</text>
            </div>
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
          </div>
        </div>
      </cell>
      <cell v-if="false">
        <div class="panel">
          <div class="wallet-info">
            <div class="flex-row" @click="showBalance(0)">
              <text class="wallet-title">我的钱包</text>
              <text class="wallet-value">    ¥ {{money.toFixed(2)}}</text>
            </div>
            <text class="btn btn-primary" @click="showBalance(1)">立即提现</text>
          </div>
          <div class="grid-list">
            <div class="grid-cell" @click="navigatorCellClicked('earning.js', true)">
              <text class="grid-value text-primary">¥{{(monthlyEstimateCommissionFee + monthlyEstimateRewardFee).toFixed(2)}}</text>
              <text class="grid-title">本月预估</text>
            </div>
            <div class="grid-cell" @click="navigatorCellClicked('earning.js', true)">
              <text class="grid-value text-primary">¥{{(monthlyEstimateCommissionFee + monthlyEstimateRewardFee).toFixed(2)}}</text>
              <text class="grid-title">本月预估</text>
            </div>
            <div class="grid-cell" @click="navigatorCellClicked('earning.js', true)">
              <text class="grid-value text-primary">¥{{(todayEstimateCommissionFee + todayEstimateRewardFee).toFixed(2)}}</text>
              <text class="grid-title">今日预估</text>
            </div>
            <div class="grid-cell" @click="showIntegral" v-if="iosShow">
              <text class="grid-value text-success">{{integral.toFixed(0)}}</text>
              <text class="grid-title">羽毛</text>
            </div>
            <div class="grid-cell" @click="navigatorCellClicked('earning.js', true)" v-if="iosShow">
              <text class="grid-cell-icon text-success icon">&#xe678;</text>
              <text class="grid-title">收益</text>
            </div>
          </div>
          <div class="grid-list">
            <div class="grid-cell" @click="navigatorCellClicked('commission-order-list.js', true)">
              <text class="grid-cell-icon text-info icon">&#xe792;</text>
              <text class="grid-title">收入明细</text>
            </div>
            <div class="grid-cell" @click="navigatorCellClicked('flash-sale-order-list.js',true)">
              <text class="grid-cell-icon icon text-primary">&#xe675;</text>
              <text class="grid-title">我的福利</text>
            </div>
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
          </div>
        </div>
      </cell>
      <cell v-if="iosShow">
        <div class="panel">
          <div class="wallet-info">
            <div class="flex-row" @click="showBalance(0)">
              <text class="wallet-title">我的钱包</text>
              <text class="wallet-value">    ¥ {{money.toFixed(2)}}</text>
            </div>
            <text class="btn btn-primary" @click="showBalance(1)">立即提现</text>
          </div>
          <div class="grid-list">
            <div class="grid-cell" @click="navigatorCellClicked('earning.js', true)">
              <text class="grid-value text-primary">¥{{(obtainedMoney).toFixed(2)}}</text>
              <text class="grid-title">累计收益</text>
            </div>
            <div class="grid-cell" @click="showIntegral" v-if="iosShow">
              <text class="grid-value text-success">{{integral.toFixed(0)}}</text>
              <text class="grid-title">羽毛</text>
            </div>
            <div class="grid-cell" @click="navigatorCellClicked('commission-order-list.js', true)">
              <text class="grid-cell-icon text-info icon">&#xe792;</text>
              <text class="grid-title">收入明细</text>
            </div>
            <div class="grid-cell" @click="navigatorCellClicked('flash-sale-order-list.js',true)">
              <text class="grid-cell-icon icon text-primary">&#xe675;</text>
              <text class="grid-title">我的福利</text>
            </div>
          </div>
        </div>
      </cell>
      <cell v-if="iosShow">
        <div class="panel">
          <div class="grid-list">
            <div class="grid-cell" @click="navigatorCellClicked('team.js',true)">
              <text class="grid-cell-icon icon text-warning">&#xe620;</text>
              <text class="grid-title">我的粉丝</text>
            </div>
            <div class="grid-cell" @click="navigatorCellClicked('my-item-selection-list.js', true)">
              <text class="grid-cell-icon text-primary icon">&#xe86f;</text>
              <text class="grid-title">我的选品库</text>
            </div>
            <div class="grid-cell" @click="navigatorCellClicked('footmark.js?type=HISTORY', true)">
              <text class="grid-cell-icon icon text-success">&#xe87e;</text>
              <text class="grid-title">我的足迹</text>
            </div>
            <div class="grid-cell" @click="navigatorCellClicked('agent-apply.js', true)" v-if="agentList.length === 0">
              <text class="grid-cell-icon text-danger icon">&#xe68a;</text>
              <text class="grid-title">申请代理</text>
            </div>
            <div class="grid-cell" @click="navigatorCellClicked('my-agent.js', true)" v-if="agentList.length > 0">
              <text class="grid-cell-icon text-danger icon">&#xe68a;</text>
              <text class="grid-title">我的代理</text>
            </div>
          </div>
          <div class="grid-list">
            <div class="grid-cell" @click="navigatorCellClicked('footmark.js?type=FAVOR', true)">
              <text class="grid-cell-icon icon text-warning">&#xe64c;</text>
              <text class="grid-title">我的收藏</text>
            </div>
            <div class="grid-cell" v-if="iosShow" @click="navigatorCellClicked('webpage.js?code=XSGL', true)">
              <text class="grid-cell-icon text-info icon">&#xe609;</text>
              <text class="grid-title">新手攻略</text>
            </div>
            <div class="grid-cell" v-if="iosShow" @click="navigatorCellClicked('webpage.js?code=QA', true)">
              <text class="grid-cell-icon icon text-success">&#xe60d;</text>
              <text class="grid-title">常见问题</text>
            </div>
            <div class="grid-cell" @click="navigatorCellClicked('customer-service.js', true)">
              <text class="grid-cell-icon icon text-warning">&#xe637;</text>
              <text class="grid-title">联系客服</text>
            </div>
            <div class="grid-cell" v-if="!iosShow"></div>
            <div class="grid-cell" v-if="!iosShow"></div>
          </div>
        </div>
      </cell>
      <cell>
        <div class="panel">
          <wxc-cell :has-arrow="true"
                    v-if="iosShow"
                    @wxcCellClicked="navigatorCellClicked('invite-user.js', true)"
                    :has-top-border="false">
            <div class="cell-title" slot="title">
              <text class="cell-title-icon icon text-info">&#xe621;</text>
              <text class="cell-title-text">邀请好友</text>
            </div>
            <text name="value" class="cell-value text-warning">邀请好友得{{inviteEachUserIntegral}}羽毛</text>
          </wxc-cell>
          <wxc-cell :has-arrow="true"
                    @wxcCellClicked="navigatorCellClicked('taobao-newer.js', true)"
                    v-if="false"
                    :has-top-border="false">
            <div class="cell-title" slot="title">
              <text class="cell-title-icon icon text-warning">&#xe607;</text>
              <text class="cell-title-text">淘宝拉新</text>
            </div>
            <text name="value" class="cell-value text-warning">每邀请一个用户得20元现金</text>
          </wxc-cell>
        </div>
      </cell>
      <cell>
        <div class="panel">
          <wxc-cell :has-arrow="true"
                    @wxcCellClicked="navigatorCellClicked('webpage.js?code=ZQMJ')"
                    v-if="false"
                    :has-top-border="false">
            <div class="cell-title" slot="title">
              <text class="cell-title-icon icon text-success">&#xe63b;</text>
              <text class="cell-title-text">赚钱秘籍</text>
            </div>
          </wxc-cell>
          <wxc-cell :has-arrow="true"
                    @wxcCellClicked="navigatorCellClicked('webpage.js?code=ABOUT_US')"
                    :has-top-border="false">
            <div class="cell-title" slot="title" @longpress="showDebugSetting">
              <text class="cell-title-icon icon text-info">&#xe602;</text>
              <text class="cell-title-text">关于辣小客</text>
            </div>
            <text name="value" class="cell-value">版本号：{{appVersion}}</text>
          </wxc-cell>
        </div>
      </cell>
    </list>
    <wxc-dialog title="温馨提示"
                :content="dialogContent"
                :show="dialogShow"
                @wxcDialogCancelBtnClicked="wxcDialogCancelBtnClicked"
                @wxcDialogConfirmBtnClicked="wxcDialogConfirmBtnClicked">
    </wxc-dialog>
    <wxc-dialog title="温馨提示"
                content="您还未进行淘宝授权，授权后才能获得辣小客的返利，请先授权"
                :show="taobaoAuthDialogShow"
                confirmText="现在去授权"
                @wxcDialogCancelBtnClicked="taobaoAuthDialogCancelBtnClicked"
                @wxcDialogConfirmBtnClicked="taobaoAuthDialogConfirmBtnClicked">
    </wxc-dialog>
  </div>
</template>
<script>
import {WxcCell, WxcDialog} from 'weex-ui'
let navigator = require('./include/xnavigator')
let api = require('./include/api')
let urlpath = require('./include/url-path')
let modal = weex.requireModule('modal')
let clipboard = weex.requireModule('clipboard')
let login = require('./include/login')
let Deferred = require('Deferred')
require('./include/page-xdom')
let broadcastChannelKeys = require('./include/broadcast-channel-keys')
let BroadcastChannel = require('./include/broadcast-channel')
let loginBroadcastChannel = new BroadcastChannel(broadcastChannelKeys.LOGIN)
let config = require('./include/app-config')
let taobaoAuth = require('./include/taobao-auth')
module.exports = {
  mixins: [
    require('./mixin/page-refresh')
  ],
  components: {
    navbar: require('./components/navbar.vue'),
    WxcCell,
    WxcDialog
  },
  data () {
    return {
      loaded: false,
      refreshing: false,
      refreshIndicatorScale: 0.2,
      defaultAvatarUrl: urlpath.assets('images/avatar.png'),
      todayEstimateCommissionFee: 0,
      todayEstimateRewardFee: 0,
      monthlyEstimateRewardFee: 0,
      inviteEachUserIntegral: 10,
      withdrawMoney: 0,
      obtainedMoney: 0,
      directMemberNum: 0,
      integral: 0,
      todayCommissionOrderNum: 0,
      waitSettleEstimateCommissionFee: 0,
      unSettleEstimateCommissionFee: 0,
      inviteUserNumForSuperLevel: 5,
      monthlyEstimateCommissionFee: 0,
      userNickname: '-',
      userInvitationCode: '-',
      userLevel: '',
      userLevelTitle: '',
      nextUserLevel: '',
      nextUserLevelTitle: '',
      money: 0,
      userAvatar: '',
      loginStatus: false,
      isPlus: false,
      appVersion: weex.config.env.appVersion,
      iosShow: false,
      agentList: [],
      userCityId: 0,
      dialogShow: false,
      dialogContent: '',
      taobaoAuthDialogShow: false,
      obtainedMoney: 0
    }
  },
  created () {
    this.loadData()
    config.bindConfig(this)
    loginBroadcastChannel.onmessage = (e) => {
      if (e.data) {
        this.loadData()
      } else {
        this.cleanData()
      }
    }
  },
  methods: {
    loadData () {
      return api.page.my.data().done(rs => {
        let data = rs.data
        this.todayEstimateCommissionFee = data.todayEstimateCommissionFee
        this.todayEstimateRewardFee = data.todayEstimateRewardFee
        this.monthlyEstimateCommissionFee = data.monthlyEstimateCommissionFee
        this.monthlyEstimateRewardFee = data.monthlyEstimateRewardFee
        this.withdrawMoney = data.withdrawMoney
        this.obtainedMoney = data.obtainedMoney
        this.integral = data.integral
        this.todayCommissionOrderNum = data.todayCommissionOrderNum
        this.unSettleEstimateCommissionFee = data.unSettleEstimateCommissionFee
        this.userInvitationCode = data.userInvitationCode
        this.userNickname = (!data.userNickname || data.userNickname.length === 0) ? '暂无昵称' : data.userNickname
        this.userAvatar = data.userAvatar
        this.money = data.money
        this.userLevel = data.userLevel
        this.nextUserLevel = data.nextUserLevel
        this.nextUserLevelTitle = data.nextUserLevelTitle
        this.isPlus = data.isPlus
        this.directMemberNum = data.directMemberNum
        this.userLevelTitle = data.userLevelTitle
        this.inviteUserNumForSuperLevel = data.inviteUserNumForSuperLevel
        this.inviteEachUserIntegral = data.inviteEachUserIntegral
        this.loaded = true
        this.loginStatus = true
        this.agentList = data.agentList
        this.obtainedMoney = data.obtainedMoney
        this.userCityId = data.userCityId
        if (!this.userCityId) {
          // 请选择您所处的位置，方便为您匹配服务商
          this.dialogShow = true
          this.dialogContent = '请选择您所处的位置，方便为您匹配服务商'
        }
        if (!data.taobaoSpecialId) {
          // 还未进行淘宝授权。弹出淘宝授权窗口
          this.taobaoAuthDialogShow = true
        }
      })
    },
    checkUserTitle () {

    },
    checkUserTitleStyle () {

    },
    cleanData () {
      this.todayEstimateCommissionFee = 0.00
      this.withdrawMoney = 0.00
      this.obtainedMoney = 0.00
      this.todayCommissionOrderNum = 0
      this.unSettleEstimateCommissionFee = 0.00
      this.userInvitationCode = '--'
      this.userNickname = '--'
      this.userAvatar = ''
      this.money = 0.00
      this.loginStatus = false
    },
    avatarClick () {
      // navigator.push('my.js')
    },
    onXRefresh (event) {
      if (this.loginStatus) {
        this.onRefresh(event, Deferred.when(this.loadData()))
      }
    },
    navigatorCellClicked (url, loginFlag) {
      if (loginFlag) {
        login.decorate(() => {
          navigator.push(url)
        })()
      } else {
        navigator.push(url)
      }
    },
    loginBtnClick () {
      login.decorate(() => {
        this.loadData()
      })()
    },
    copyInvitationCode () {
      clipboard.setString(this.userInvitationCode)
      modal.toast({message: '已复制到剪贴板', duration: 0.5})
    },
    goToSettings () {
      login.decorate(() => {
        navigator.push('settings.js')
      })()
    },
    applyAgentClick () {
      login.decorate(() => {
        navigator.push('agent-apply.js')
      })()
    },
    wxcDialogConfirmBtnClicked () {
      this.dialogShow = false
      navigator.push('my-location.js')
    },
    wxcDialogCancelBtnClicked () {
      this.dialogShow = false
    },
    taobaoAuthDialogConfirmBtnClicked () {
      this.taobaoAuthDialogShow = false
      taobaoAuth.auth().done(() => {
        this.onXRefresh()
      })
    },
    taobaoAuthDialogCancelBtnClicked () {
      this.taobaoAuthDialogShow = false
    },
    showBalance (flag) {
      login.decorate(() => {
        navigator.push('my-balance.js?withdraw=' + flag || 0)
      })()
    },
    showCommissionOrderList () {
      login.decorate(() => {
        navigator.push('commission-order-list.js')
      })()
    },
    userLevelClick () {
      navigator.push('upgrade-user-level.js')
    },
    toggleUserLevel () {
      if (this.nextUserLevel === 'SUPER') {
        this.nextUserLevel = 'PLUS'
        this.nextUserLevelTitle = 'PLUS会员'
      } else {
        this.nextUserLevel = 'SUPER'
        this.nextUserLevelTitle = '超级会员'
      }
    },
    showIntegral () {
      login.decorate(() => {
        navigator.push('my-integral.js')
      })()
    },
    showDebugSetting () {
      modal.prompt({
        message: '测试',
        duration: 0.3
      }, (res) => {
        switch (res.data) {
          case '1':
            navigator.push('http://192.168.31.174/mz/index.js'); break
          case '2':
            navigator.push('http://bundlejs-mlg.oss-cn-beijing.aliyuncs.com/staging/index.js'); break
        }
      })
    }
  }
}
</script>
<style lang="scss">
  @import "./sass/var";
  @import "./sass/mixin";
  @import "./sass/utilities";
  @import "./sass/icon";
  @import "./sass/activeable";
  @import "./sass/buttons";

  .header-wrapper {
    position: relative;
    overflow: hidden;
  }
  .wallet {
    &-info {
      padding: 20px;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      @include border-bottom(1, solid, #ddd);
    }
    &-title {
      font-size: 30px;
      color: $color;
    }
    &-value {
      font-size: 36px;
      color: $color-primary;
    }
  }
  .upgrade {
    position: absolute;
    bottom: -100px;
    right: -10px;
    width: 200px;
    height: 200px;
    border-radius: 8px;
    padding: 20px 20px;
    background-color: #2F3242;
    /*align-items: flex-start;*/
    /*transform: rotate(6deg);*/
    box-shadow: 0px 0px 5px #2F3242;
    &-level {
      font-size: 24px;
      line-height: 24px;
      &-PLUS {
        color: #ffdb65;
      }
      &-CARRIER {
        color: #ff7400;
      }
      &-CHIEF {
        color: #ff7400;
      }
    }
    &-info {
      background-color: #444655;
      font-size: 18px;
      line-height: 28px;
      height: 28px;
      border-radius: 28px;
      color: #dfdfdf;
      padding: 0 10px 0 15px;
      margin-top: 5px;
      @include border(1px, solid, #5B5A5E);
      &-PLUS {
        color: #dfdfdf;
      }
    }
  }

  .user-agent {
    &-label {
      font-size: 24;
      color: #ffffff;
      background-color: $brand-warning;
      padding: 0 10px;
      margin-left: 10px;
      line-height: 34px;
      height: 34px;
      border-radius: 24px;
    }
  }

  .grid-list {
    flex-direction: row;
    @include border-bottom(1px, solid, #ddd);
  }

  .grid-cell {
    flex: 1;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    @include border-right(1px, solid, #ddd);
  }

  .grid-value {
    flex-direction: row;
    height: 56px;
    line-height: 56px;
    font-weight: 300;
    font-size: 32px;
    color: $color;
  }

  .grid-values {
    height: 56px;
    line-height: 56px;
    &-val {
      flex-direction: row;
      font-weight: 300;
      font-size: 32px;
      height: 32px;
      line-height: 32;
      color: $color;
      text-align: center;
      &-small {
        font-size: 24px;
        height: 24px;
        line-height: 24px;
        color: $color-success;
        text-align: center;
      }
    }
  }

  .grid-title {
    font-size: 24px;
    color: $color;
  }

  .grid-cell-icon {
    font-size: 50px;
    height: 56px;
    line-height: 56px;
  }

  .container {
    background-color: $body-bg;
  }

  .header {
    background-image: $gradient-bg-primary;
    height: 300px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-left: 50px;
    padding-top: 60px;
    &-right {
      height: 300px;
      width: 100px;
      &-icon {
        color: #ffffff;
        margin-right: 30px;
        font-size: 50px;
        margin-top: 30px;
      }
    }
    &-login-panel {
      justify-content: flex-start;
      align-items: flex-start;
      flex: 1;
    }
    &-login-btn {
      color: #ffffff;
      font-size: 32px;
      background-color: rgba(255, 255, 255, 0.36);
      padding: 5px 30px;
      width: 190px;
      text-align: center;
      border-radius: 40px;
    }
  }

  .user-avatar {
    width: 130px;
    height: 130px;
    border-radius: 130px;
    &-wrapper {
      background-color: #fff;
      width: 130px;
      height: 130px;
      border-radius: 130px;
      align-items: center;
      justify-content: center;
      margin-right: 30px;
    }
  }

  .user-detail {
    flex: 1;
    align-content: space-between;
    &-row {
      flex-direction: row;
      align-items: center;
      margin-bottom: 10px;
    }
  }
  .user-level {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.4);
    font-size: 24px;
    padding: 0 10px;
    margin-left: 10px;
    line-height: 34px;
    height: 34px;
    border-radius: 24px;
    &-SUPER {
      background-color: #fdbc0f;
    }
    &-PLUS {
      background-color: rgba(255, 255, 255, 0.67);
      color: #444655;
    }
  }

  .user-nick {
    font-size: 32px;
    height: 38px;
    line-height: 38px;
    color: #ffffff;
  }

  .user-invitation-code {
    font-size: 28px;
    color: #ffffff;
  }

  .copy-invitation-btn {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.4);
    font-size: 20px;
    padding: 0 10px;
    margin-left: 10px;
    line-height: 30px;
    height: 30px;
    border-radius: 24px;
  }

  .panel {
    margin-bottom: 10px;
    background-color: #ffffff;
  }

  .cell-title {
    flex-direction: row;
    align-items: center;
    &-icon {
      margin-right: 10px;
      font-size: 40px;
      font-weight: 300;
    }
    &-text {
      color: $color;
      font-size: 32px;
      font-weight: 300;
    }
  }

  .cell {
    &-value {
      color: $color-muted;
      font-size: 28px;
      font-weight: 300;
    }
  }

</style>
